<template>
  <div class="loanBusiness">
    <Tabs :option="tabsOption" @change="tabsChange"></Tabs>
    <div v-for="(item,index) in tabsOption.column" :key="index">
      <div v-if="changeTabOption.prop === item.prop">
        <avue-crud
          :option="tableOption"
          :data="tableData"
          :page="tablePage"
          @search-change="search"
          @search-reset="searchClear"
          @sizeChange="sizeChangeSearch"
          @currentChange="currentChangeSearch">
          <template slot-scope="scope" slot="menu" style="float: right">
            <el-button size="small" type="text" v-for="(item,index) in tableButtonArray" :key="'cc' + index"
                       @click="tableButton(item.prop, scope.row)">{{item.label}}
            </el-button>
          </template>
        </avue-crud>
      </div>
    </div>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      top="7%"
      width="90%">
      <el-scrollbar style="height: 450px;">
        <SimpleData v-if="dialogTableFlag" :simpleData="dialogSimpleData" :option="dialogSimpleOption" :buttonSelf="dialogSimpleButtonArray"
                    @selfButton="simpleButton"></SimpleData>
        <avue-crud
          style="margin: 10px 0px;"
          v-if="!dialogTableFlag"
          :key='mathRandom'
          :option="dialogTableOptions"
          :data="dialogTableData">
        </avue-crud>
      </el-scrollbar>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import Axios from 'axios'
  import Tabs from '@/components/common/Tabs'
  import SimpleData from '@/components/common/SimpleData'
  import {queryLoss, saveTransTraffic} from '@/api/bankBiz/loss/loss'

  export default {
    name: 'loan-business',
    components: {
      Tabs,
      SimpleData
    },
    data() {
      return {
        namespace: 'Personal',
        nameFlag: 'loanBusiness',
        type: [],
        returnType: [],
        tabsOption: {},
        changeTabOption: {},
        tableOption: {},
        tableButtonArray: [],
        tablePage: {},
        query: {
          'namespace': '',
          'key': ''
        },
        tableTotalData: [],
        tableData: [],
        // 详情相关
        dialogVisible: false,
        dialogTitle: '',
        dialogOption: {},
        dialogTableFlag: false,
        dialogSimpleData: {},
        dialogSimpleOption: {},
        dialogSimpleButtonArray: [],
        dialogTableData: [],
        dialogTableOptions: {},
        mathRandom: ''
      }
    },
    created() {
      this.initOptions()
    },
    mounted() {

    },
    methods: {
      // 初始化配置
      initOptions() {
        this.type = this.$route.meta.type
        // 循环组件，初始化赋值
        for (let i = 0; i < this.type.length; i++) {
          // 1 页签初始化
          if ('tabs' === this.type[i]) {
            let tabsViewOption = personalOptions.tabsViewOption
            this.tabsOption = tabsViewOption[this.nameFlag].tabsOption
            // 默认第一个页签
            this.changeTabOption.prop = this.tabsOption.column[0].prop
            this.returnType = this.tabsOption.column[0].type
            // 初始化第一个页签配置
            for (let j = 0; j < this.tabsOption.column[0].type.length; j++) {
              if ('table' == this.tabsOption.column[0].type[j]) {
                this.tableOption = this.tabsOption.column[0].tableOptions
                this.tablePage = this.tabsOption.column[0].tablePage
                this.tableButtonArray = this.tabsOption.column[0].tableButtonArray
                // 详情相关
                this.dialogOption = this.tabsOption.column[0].detailOptions
                this.dialogSimpleButtonArray = this.tabsOption.column[0].detailOptions.simpleButtonArray
              }
            }
            if (this.tabsOption.column[0].query) {
              this.query.query = Object.assign({}, this.tabsOption.column[0].query)
            }
            this.query.namespace = this.namespace
            this.query.key = this.tabsOption.column[0].prop
          }
        }
        this.commonQueryData()
      },
      // 切换页签
      tabsChange(column) {
        console.log(column)
        let data = []
        for (let i = 0; i < this.tabsOption.column.length; i++) {
          if (this.tabsOption.column[i].prop === column.prop) {
            data = this.tabsOption.column[i]
          }
        }
        this.changeTabOption = data
        this.returnType = data.type
        if (data.query) {
          this.query.query = Object.assign({}, data.query)
        }
        this.query.key = data.prop
        for (let i = 0; i < data.type.length; i++) {
          if ('table' == data.type[i]) {
            this.tableOption = data.tableOptions
            this.tablePage = data.tablePage
            this.tableButtonArray = data.tableButtonArray
            this.tableData = []
            this.tableTotalData = []
            // 详情相关
            this.dialogOption = data.detailOptions
            this.dialogSimpleButtonArray = data.detailOptions.simpleButtonArray
          }
        }
        this.commonQueryData()
      },
      // 搜索按钮事件
      search(params, done) {
        Object.keys(params).forEach(keys => {
          if (params[keys]) {
            this.query.query[keys] = params[keys]
          }
        })
        this.commonQueryData(true)
        if (done) {
          done()
        }
      },
      searchClear() {
        this.query.query.accountNo = ''
      },
      // 调用接口获取数据
      commonQueryData(flag) {
        // 初始化接口入参
        if (this.query.query.customerNo) {
          this.query.query.customerNo = sessionStorage.getItem('customerNo')
        }
        if (this.query.query.accountNo && !flag) {
          this.query.query.accountNo = ''
        }
        // 初始化分页参数
        this.query.query.currentPage = 1
        this.query.query.pageSize = 20
        this.tablePage.currentPage = 1
        this.tablePage.pageSize = 20
        this.tablePage.total = 0
        // 调用公共业务接口
        queryLoss(this.query).then((res) => {
          console.log('response data is: ' + JSON.stringify(res.data))
          if (200 == res.data.code) {
            for (let i = 0; i < this.returnType.length; i++) {
              if ('table' == this.returnType[i]) {
                if (res.data.data.resList == null || res.data.data.resList == undefined) {
                  this.tableData = []
                  this.tableTotalData = []
                  this.tablePage.total = 0
                  return
                }
                this.tableData = res.data.data.resList
                this.tableTotalData = res.data.data.resList
                // 理财产品超市、当前持有、当前委托、基金产品超市
                if ('wealthProductSupermarket' ==  this.query.key) {
                  console.log(parseInt(res.data.data.totalNum))
                  this.tablePage.total = parseInt(res.data.data.totalNum)
                  return
                }
                // 兼容客户端分页
                if ('Client' == window.Settings.pageType) {
                  this.tableData = this.tableTotalData.slice((this.tablePage.currentPage - 1) * this.tablePage.pageSize, this.tablePage.currentPage * this.tablePage.pageSize)
                  this.tablePage.total = this.tableTotalData.length
                }
              }
            }
            saveTransTraffic(this.query.namespace + '-' + this.query.key, '成功', '')
          } else {
            let errMsg = res.data.message
            window.globalUiKit.notify('提示', errMsg, 'error')
            saveTransTraffic(this.query.namespace + '-' + this.query.key, '失败', errMsg)
            this.tableData = []
            this.tableTotalData = []
            this.tablePage.total = 0
          }
        }).catch((err) => {
          saveTransTraffic(this.query.namespace + '-' + this.query.key, '失败', '')
          this.tableData = []
          this.tableTotalData = []
          this.tablePage.total = 0
          console.log(err)
        })
      },
      // 表格按钮操作
      tableButton(prop, row) {
        console.log('table prop is: ' + prop + ', table row is: ' + JSON.stringify(row))
        this.dialogVisible = true
        this.dialogSimpleOption = {}
        this.dialogTableOptions = {}
        this.dialogTableData = []
        this.mathRandom = Math.random()*10
        // 查看详情
        if ('personal-loanRepayment-detail' === prop) {
          this.dialogTitle = '贷款详情'
          this.dialogTableFlag = true
          this.dialogSimpleOption = this.dialogOption.simpleOptions
          this.dialogSimpleData = row
        }
        // 还款计划
        else if ('personal-loanRepayment-plan' === prop) {
          this.dialogTitle = '还款计划'
          this.dialogTableFlag = false
          this.dialogTableOptions = this.dialogOption.loanBusinessPlan
          this.repaymentBusiness('loanRepayPlanData', row.loanAccount)
        }
        // 还款记录
        else if ('personal-loanRepayment-history' === prop) {
          this.dialogTitle = '还款记录'
          this.dialogTableFlag = false
          this.dialogTableOptions = this.dialogOption.loanBusinessHistory
          this.repaymentBusiness('loanRepayHistoryData', row.loanAccount)
        }
      },
      // simpleData自定义事件
      simpleButton(prop) {
        console.log('prop is: ' + prop)
      },
      // 还款计划AND还款记录
      repaymentBusiness(prop, accountNo) {
        let params = {
          'namespace': this.namespace,
          'key': prop,
          'query': {
            'accountNo': accountNo,
          }
        }
        queryLoss(params).then((res) => {
          console.log('response data is: ' + JSON.stringify(res.data))
          if (200 == res.data.code) {
            this.dialogTableData = res.data.data.resList
          } else {
            this.dialogTableData = []
            window.globalUiKit.notify('提示', res.data.message, 'error')
          }
        }).catch((err) => {
          console.log(err)
          this.dialogTableData = []
        })
      },
      // 切换行数
      sizeChangeSearch(val) {
        this.query.query.currentPage = 1
        this.query.query.pageSize = val
        // 理财产品超市、当前持有、当前委托、基金产品超市
        if ('wealthProductSupermarket' == this.query.key) {
          queryLoss(this.query).then((res) => {
            if(res.data.code == 200){
              this.tablePage.total = parseInt(res.data.data.totalNum)
              this.tableData = res.data.data.resList
            }else{
              this.tablePage.total = 0
              this.tableData = []
              window.globalUiKit.notify('提示', res.data.message, 'error')
            }
          }).catch((err) => {
            console.log(err)
          })
          return
        }
        // 兼容客户端分页
        if ('Client' == window.Settings.pageType) {
          this.tablePage.currentPage = 1
          this.tablePage.pageSize = val
          this.tableData = this.tableTotalData.slice((this.tablePage.currentPage - 1) * this.tablePage.pageSize, this.tablePage.currentPage * this.tablePage.pageSize)
          this.tablePage.total = this.tableTotalData.length
          return
        }
      },
      // 切换页码
      currentChangeSearch(val) {
        this.query.query.currentPage = val
        console.log('切换页码')
        // 理财产品超市、当前持有、当前委托、基金产品超市
        if ('wealthProductSupermarket' ==  this.query.key) {
          queryLoss(this.query).then((res) => {
            if(res.data.code == 200){
              this.tablePage.total = parseInt(res.data.data.totalNum)
              this.tableData = res.data.data.resList
            }else{
              this.tablePage.total = 0
              this.tableData = []
              window.globalUiKit.notify('提示', res.data.message, 'error')
            }
          }).catch((err) => {
            console.log(err)
          })
          return
        }
        // 兼容客户端分页
        if ('Client' == window.Settings.pageType) {
          this.tablePage.currentPage = val
          this.tableData = this.tableTotalData.slice((this.tablePage.currentPage - 1) * this.tablePage.pageSize, this.tablePage.currentPage * this.tablePage.pageSize)
          this.tablePage.total = this.tableTotalData.length
          return
        }
      }
    },
    // 当前组件路由守卫
    beforeRouteEnter(to, from, next) {
      next()
    },
    beforeRouteLeave(to, from, next) {
      this.$destroy()
      next();
    },
  }
</script>

<style scoped>

  .el-breadcrumb {
    padding: 10px 0 !important;
  }

  .el-button--primary {
    margin-top: 5px !important;
  }
</style>
